﻿<div id="container" class="PageContainer">    
    <hr />
    <img id="waitImage" src="images/wait.gif" ng-show="loading" class="waitImage waitImageTopGridPosition" />

    <uib-accordion>
        <uib-accordion-group style="margin-left:12px; margin-top:12px;">
            <uib-accordion-heading>
                <span>Filter</span>
            </uib-accordion-heading>
            <div style="display:table; margin:0 auto">
                <!-- Center this whole div -->
                <div class="row">
                    <div class="col-xs-6">
                        <div class="customLabelLeftSkinny" style="float:left;">End date</div>
                        <div class="input-group">
                            <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="state.dateEnd"
                                   is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"
                                   alt-input-formats="altInputFormats" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="customLabelLeftSkinny" style="float:left;">Max results</div>&nbsp;
                        <input type="text" style="width:100px;" ng-model="state.numberOfInstallsToRetrieve" />
                        (1 - {{state.maxNumberOfInstallsToRetrieve}})
                    </div>
                </div>
                <div class="customLabelLeftSkinny">Application</div>
                <div class="customLabelRight">{{state.selectedApp.Name}} {{state.selectedApp.Version}}</div>
                <button class="btn btn-default" ng-click="pickApp();" style="display:inline-block;" ng-disabled="loading">...</button>
                <button class="btn btn-default" ng-click="clearApp();" style="display:inline-block;" ng-disabled="loading">x</button>
                <br />
                <div class="customLabelLeftSkinny">Server</div>
                <div class="customLabelRight">{{state.selectedServer.Name}}</div>
                <button class="btn btn-default" ng-click="pickServer();" style="display:inline-block;" ng-disabled="loading">...</button>
                <button class="btn btn-default" ng-click="clearServer();" style="display:inline-block;" ng-disabled="loading">x</button>
                <br />
            </div>
        </uib-accordion-group>
    </uib-accordion>    

    <uib-accordion>
        <uib-accordion-group style="margin-left:12px; margin-top:12px;" is-open="true">
            <uib-accordion-heading>
                <span>Installations ({{state.installs.length}})</span><span style="font-size:12px;"> - as of {{state.dateEndUiFriendly}}</span>
            </uib-accordion-heading>
            <div class="gridHalf" ui-grid="gridOptions" ui-grid-selection ui-grid-resize-columns></div>
            <div style="margin-top: 12px; text-align: center;">
                <button class="btn btn-default" ng-click="convertToCsv();" ng-disabled="loading">Export to CSV...</button>
                <button class="btn btn-default" ng-click="refresh(true);" ng-disabled="loading">Refresh</button>
            </div>
        </uib-accordion-group>
    </uib-accordion>	
    
    <uib-accordion>
        <uib-accordion-group style="margin-left:12px;">
            <uib-accordion-heading>
                <span>Installation Details</span>
            </uib-accordion-heading>
            <div class="gridHalf" ui-grid="gridOptions2" ui-grid-selection ui-grid-resize-columns></div>
            <div ng-repeat="detail in state.selectedDetails" class="slide">
                <!-- Use the pre tag so newline characters are honored. -->
                <pre>Details: {{detail.Details}}</pre>
            </div>
        </uib-accordion-group>
    </uib-accordion>	
    
    <uib-accordion>
        <uib-accordion-group style="margin-left:12px;">
            <uib-accordion-heading>
                <span>Pending</span>
            </uib-accordion-heading>
            <div class="gridHalf" ui-grid="gridPending" ui-grid-selection ui-grid-resize-columns></div>
        </uib-accordion-group>
    </uib-accordion>
</div>